<template>
  <div id='editPubCloud' style='height:100%; width:100%;'>
    <!-- 基本信息 -->
    <el-divider></el-divider>
    <div class='center'>

      <el-form :model='pubCloudForm' ref='cloudForm' :rules='rules' label-width='100px'>
        <el-form-item :label="$t('vdc.consultName')" prop='name'>
          <el-input v-model='pubCloudForm.name' style='width: 300px;' placeholder='请输入磋商名称'></el-input>
        </el-form-item>
        <el-form-item :label="$t('vdc.consultIds')" prop='cloudPlatformIds' >
          <el-input v-model='pubCloudForm.cloudPlatformNames' style='width: 300px;'  disabled placeholder='请输入磋商名称'></el-input>
        </el-form-item>
        <el-form-item :label="$t('vdc.remark')" >
          <el-input   type="textarea"
                      :rows="2" v-model='pubCloudForm.remark'   style='width : 300px ;'></el-input>
        </el-form-item>


<!--        <el-form-item :label="$t('cloudForm.rdsQuota')" prop='rdsQuota'>-->
<!--          <el-input-number v-model='pubCloudForm.rdsQuota'  :min="0" :max="1000" label="" style='width : 300px ;'></el-input-number>-->
<!--        </el-form-item>-->
      </el-form>
    </div>
    <!-- 操作区 -->
    <div :style='footButtonStyle()'>
      <el-button type='primary' @click='onSave' size='mini'>{{ $t('btn.save') }}</el-button>
      <el-button @click='onCancel' size='mini'>{{ $t('btn.cancel') }}</el-button>
    </div>
  </div>

</template>
<style lang='scss'>
#editPubCloud {
  & .center {
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
  }

  & .el-form-item {
    margin: 25px 0px;
  }

  & .subnet-block {
    position: relative;
    left: 50%;
    margin-left: -413px;
    width: 850px
  }

  & .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }

  & .ip-segment-part {
    width: 50px;
  }
}
</style>
<script>
import local from './js/local'
import cloudApi from '@/api/pubCloudApi'
import pubCloudApi from '@/api/pubCloudApi.js'
export default {
  i18n: {
    messages: local
  },
  mixins: [parent],
  data() {
    return {
      isAdd: false,
      id: '',
      pubCloudForm: {
        name: '',
        cloudPlatformIds: '',
        remark: '',
        id: '',
        platformName: '',
        platformType: '',
        apiProvider: '',
        cloudProvider: '',
        secretId: '',
        secretKey: '',
        regionName: '',
        vmQuota: '', // 实例配额
        vpcQuota: '', // VPC网络
        diskNumQuota: '', // 数据盘块数
        diskCapacityQuota: '', // 数据盘容量
        rdsQuota: '' // 数据库配额

      },
      datacenters: [],
      rules: {
        secretId: { required: true, message: '请填写Secret Id', trigger: 'blur' },
        name: { required: true, message: '请填写磋商名称', trigger: 'blur' },
        cloudPlatformIds: { required: true, message: '请填写', trigger: 'blur' },
        cloudProvider: { required: true, message: '请选择', trigger: 'blur' }
      }
    }
  },
  mounted() {
    // this.getDataCenterList()
    // this.getPubCloud()
  },
  beforeMount() {
    this.pubCloudForm.id = this.$route.params.id
    this.pubCloudForm.cloudPlatformIds = this.$route.params.cloudPlatformIds
    this.pubCloudForm.cloudPlatformNames = this.$route.params.cloudPlatformNames
    this.pubCloudForm.name = this.$route.params.name
    this.pubCloudForm.remark = this.$route.params.remark
  },
  methods: {
    getPubCloud() {
      cloudApi.cloudDetailRequest({ id: this.id }).then(({ data }) => {
        this.pubCloudForm = data
      }).catch((error) => {
        console.log(error)
      })
    },
    validateConnection() {
      const self = this
      self.$refs['cloudForm'].validate((valid) => {
        if (valid) {
          this.showLoading = true
          cloudApi.validateConnectionRequesttest(this.pubCloudForm).then(({ data }) => {
            this.showLoading = false
            self.regionDataCache = data
            self.$message({
              message: self.$t('msg.connect_test_success'),
              type: 'success'
            })
          }).catch((error) => {
            this.showLoading = false
            if (error && error.msg) {
              self.$message({
                message: error.msg,
                type: 'error'
              })
            }
          })
        }
      })
    },
    getDataCenterList() {
      // 获取datacenter Option
      cloudApi.vdcTypeRequest().then(({ data }) => {
        this.datacenters = data
      }).catch((error) => {
        console.log(error)
      })
    },
    onSave() {
      this.$refs['cloudForm'].validate((valid) => {
        if (!valid) {
          this.$message({
            showClose: true,
            message: this.$t('volume.errorMessage'),
            type: 'error'
          })
        } else {
          const params = {
            id: this.pubCloudForm.id,
            name: this.pubCloudForm.name,
            cloudPlatformIds: this.pubCloudForm.cloudPlatformIds,
            remark: this.pubCloudForm.remark
          }
          pubCloudApi.updateConsultRequest(params).then(({ data }) => {
            this.$router.push({ name: 'pubCloudList' })
          }).catch((error) => {
            this.$message({
              showClose: true,
              message: error.msg,
              type: 'error'
            })
          })
        }
      })
    },
    onCancel() {
      this.$router.push({ name: 'pubCloudList' })
    },
    footButtonStyle(length) {
      if (length !== 0) {
        return 'text-align:center;margin-top:30px'
      } else {
        return 'text-align:center;margin-top:50px'
      }
    },
    isEmpty(obj) {
      if (obj == null || obj === '' || obj === undefined) {
        return true
      }
      return false
    }
  },
  watch: {
    importProgress(val) {
      if (val == 100) {
        this.form.uploadStatus = 3
      } else if (val == -1) {
        this.form.uploadStatus = 4
      }
    }
  },
  computed: {}
}
</script>
